<html>
  <head>
    <title></title>
    <style>
    
      div#clock {
        size:250px 100px;
        background:gold;
        border: 3px solid brown;
        border-radius:8px;
      }

      // note: this is a style of Graphics.Text(,,"time-text") object
      div#clock text.time-text {
        font-family: "Century Gothic", sans-serif;
        font-size: 48px;        
        color: brown;
      }
    
    </style>
    <script type="text/tiscript">
    
    
    function DigitalClock(params = {}) {
    
      var el = params.on || self;
      var position  = params.textAlignment || 5;  // center by default
     
      function timeText() {
        var now = new Date();
        return String.printf("%02d:%02d:%02d", now.hour, now.minute, now.second);
      }
      
      // note: we use host element and class name where text styling is defined
      var textLayout = new Graphics.Text(timeText(),el,"time-text"); 
      
      el.paintContent = function(gfx) {
        var (x,y,w,h) = el.box(#rectw,#inner);
        gfx.drawText(textLayout, x + w / 2, y + h / 2, position ); 
      }
      el.timer(0.25s, function() {  
        const t = timeText();
        if( textLayout.chars != t ) {
          textLayout.chars = t;
          el.refresh();
        }
        return true; // keep ticking;
      })
    }
    
    
    DigitalClock { on : $(div#clock) };
    
    </script>
  </head>
<body>

  <p>This sample demonstrates use <code>chars</code> property of <code>Graphics.Text</code> object and drawing alignment in <code>Graphics.drawText()</code></p>

  <div #clock />

</body>
</html>
